<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>上下切换图片</title>
</head>
<body>
    <img name="icon" src="imgs/pet-01.jpg">
    <p></p>
    <button class="last-btn">上一张</button>
    <button class="next-btn">下一张</button>

    <script type="text/javascript">
        // 全局变量
        var maxIndex = 3;
        var minIndex = 1;
        var currentIndex = 1;

        // 拿到要操作的标签
        var img = document.getElementsByName('icon')[0];
        var last_btn = document.getElementsByClassName('last-btn')[0];
        var next_btn = document.getElementsByClassName('next-btn')[0];

        last_btn.onclick = function () {
            nextImageWithAdd(true);
        };

        next_btn.onclick = function () {
            nextImageWithAdd(false);
        };

        function nextImageWithAdd(isAdd) {
            if (isAdd == true) {
                if (currentIndex == maxIndex) {
                    currentIndex = minIndex;
                } else {
                    currentIndex = currentIndex + 1;
                }
            } else {
                if (currentIndex == minIndex) {
                    currentIndex = maxIndex;
                } else {
                    currentIndex = currentIndex - 1;
                }
            }

            img.src = 'imgs/pet-0'+ currentIndex + '.jpg';
        }
    </script>
</body>
</html>